<template>
  <div class="login-body">
    <div class="login-panel">
      <div class="login-title">管理员登录</div>
      <el-form :model="formData" :rules="rules" ref="formRef">
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input v-model="formData.account" clearable placeholder="请输入账号" size="large">
            <template #prefix>
              <span class="iconfont icon-account"></span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input size="large" v-model="formData.password" type="password" placeholder="请输入密码" clearable>
            <template #prefix>
              <span class="iconfont icon-password"></span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="checkCode">
          <div class="check-code-panel">
            <el-input @keyup.native="login" class="input-panel" size="large" v-model="formData.checkCode" placeholder="请输入验证码" clearable>
              <template #prefix>
                <span class="iconfont icon-checkcode"></span>
              </template>
            </el-input>
            <img :src="checkCodeUrl" class="check-code" @click="changeCheckCode" />
          </div>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="login" size="large" :style="{ width: '100%' }">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import md5 from 'js-md5';
import { ref, getCurrentInstance } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

//api 接口
const api = {
  checkCode: 'api/checkCode',
  login: 'login'
}
// 验证码
const checkCodeUrl = ref(api.checkCode)
const changeCheckCode = () => {
  //必须在后面加上时间否则无法生效
  checkCodeUrl.value = api.checkCode + '?' + new Date().getTime()
}

// 表单数据
const formData = ref({})
const formRef = ref(null)
const rules = {
  account:[{ required: true, message: '请输入账号', trigger: 'blur' }],
  password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
  checkCode:[{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

//登录
const login = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }

    let params = Object.assign({}, formData.value)
    
    params.password = md5(params.password)
    let res = await proxy.request({
      url: api.login,
      params:params,
      errorCallback:()=>{
        changeCheckCode()
      }
    })

    if(!res){
      return
    }

    // 登录成功
    proxy.Message.success('登录成功',()=>{
      router.push('/')
    })

    //保存用户信息到cookies中 设置的0 表示浏览器关闭就消失
    proxy.VueCookies.set('userInfo',res.data,0)
  })
}
</script>

<style scoped lang="scss">
.login-body {
  width: 100%;
  height: calc(100vh);
  background-size: cover;
  background-position: center;
  background-image: url('../assets/image/login-bg.jpg');

  .login-panel {
    margin-top: 150px;
    width: 350px;
    float: right;
    margin-right: 100px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    box-shadow: 2px 2px 10px #ddd;

    .login-title {
      font-size: 25px;
      text-align: center;
      margin-bottom: 10px;
    }

    .check-code-panel {
      width: 100%;
      display: flex;
      align-items: center;
      .input-panel {
        flex: 1;
        margin-right: 5px;
      }
      
      .check-code {
        cursor: pointer;
      }
    }
  }
}
</style>
